// 一. 添加类别
$('.add').on('click', () => {
  //1. 弹框
  let index = layer.open({
    type: 1,
    content: add_str, // 弹层里面显示内容
    title: '新增分类',
    area: ['500px', '300px'],
    // 和$.ajax的success效果一样
    success() {
      console.log('success-------------')

      // 2. 点击确认添加
      $('#add_form').on('submit', e => {
        // 2.0  阻止默认行为
        e.preventDefault()

        //2.1 收集数据
        let name = $('#add_form input[name=name]').val()
        let alias = $('#add_form input[name=alias]').val()
        let data = `name=${name}&alias=${alias}`

        //2.2 发送请求
        axios
          .post('http://api-breakingnews-web.itheima.net/my/article/addcates', data, {
            headers: {
              Authorization: localStorage.getItem('token'),
            },
          })
          .then(res => {
            console.log('添加类别', res.data)
            // 2.3 提示
            layer.msg('添加类别成功', { icon: 1 })

            // 2.4 关闭
            layer.close(index)

            // 2.5 重新获取最新类别数据
            load_cates()
          })
      })
    },
  })
})

// 二. 展示类别管理数据
function load_cates() {
  mg_getCategory(res => {
    let list = res.data.data

    // 清空
    $('.layui-table tbody').empty()

    list.forEach(v => {
      let theTr = `<tr>
        <td>${v.name}</td>
        <td>${v.alias}</td>
        <td>
          <button myid="${v.Id}" data-name="${v.name}" data-alias="${v.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>

          <button myid="${v.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
        </td>
      </tr>`

      $('.layui-table tbody').append(theTr)
    })
  })

  // axios
  //   .get('http://api-breakingnews-web.itheima.net/my/article/cates', {
  //     headers: {
  //       Authorization: localStorage.getItem('token'),
  //     },
  //   })
  //   .then(res => {
  //     console.log('获取类别数据', res.data)
  //     let list = res.data.data

  //     // 清空
  //     $('.layui-table tbody').empty()

  //     list.forEach(v => {
  //       let theTr = `<tr>
  //       <td>${v.name}</td>
  //       <td>${v.alias}</td>
  //       <td>
  //         <button myid="${v.Id}" data-name="${v.name}" data-alias="${v.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>

  //         <button myid="${v.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
  //       </td>
  //     </tr>`

  //       $('.layui-table tbody').append(theTr)
  //     })
  //   })
}

load_cates()

// 三. 点击编辑按钮
$('.layui-table tbody').on('click', '.edit', e => {
  console.log('点击了编辑按钮')

  // 0. 获取
  let myid1 = e.target.getAttribute('myid')
  let name1 = e.target.getAttribute('data-name')
  let alias1 = e.target.getAttribute('data-alias')

  // 1. 弹框
  let index = layer.open({
    type: 1,
    content: edit_str, // 弹层里面显示内容
    title: '编辑分类',
    area: ['500px', '300px'],
    // 和$.ajax的success效果一样
    success() {
      //2. 回显赋值
      $('#edit_form input[name=name]').val(name1)
      $('#edit_form input[name=alias]').val(alias1)
      // 这个是大写的Id  ★
      $('#edit_form input[name=Id]').val(myid1)

      // 3. 点击确认修改
      $('#edit_form').on('submit', e => {
        // 3.1 阻止默认行为
        e.preventDefault()
        // 3.2 收集数据
        let name2 = $('#edit_form input[name=name]').val()
        let alias2 = $('#edit_form input[name=alias]').val()
        let Id = $('#edit_form input[name=Id]').val()
        let data = `name=${name2}&Id=${Id}&alias=${alias2}`
        console.log('最新的------', name2, alias2, Id)

        //3.3 发送后台
        axios
          .post('http://api-breakingnews-web.itheima.net/my/article/updatecate', data, {
            headers: {
              Authorization: localStorage.getItem('token'),
            },
          })
          .then(res => {
            console.log('修改类别', res.data)
            //3.4 提示
            layer.msg('修改成功', { icon: 1 })

            //3.5 重新加载
            load_cates()

            //3.6 关闭当前窗口
            layer.close(index)
          })
      })
    },
  })
})

// 四. 点击删除按钮
$('.layui-table tbody').on('click', '.delete', e => {
  // 0. 获取id 属性
  let myid = e.target.getAttribute('myid')

  console.log('点击了删除按钮', myid)
  //1. 弹框
  layui.layer.confirm('确定要删除该类别吗', { icon: 3, title: '提示' }, function (index) {
    console.log('---------')

    // 2. 发送请求
    axios
      .get(`http://api-breakingnews-web.itheima.net/my/article/deletecate/${myid}`, {
        headers: {
          Authorization: localStorage.getItem('token'),
        },
      })
      .then(res => {
        console.log('删除类别', res.data)
        // 3.1 关闭弹框
        layer.close(index)
        // 3.2 提示
        layer.msg('删除类别成功', { icon: 1 })

        // 3.3 刷新一下数据
        load_cates()
      })
  })
})

/**
 *  字符串 *****************************************************
 */
// 添加类型的 - 弹出层上的 表单标签
let add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
</form>`

// 3. 编辑分类 **********************************************************
// 也要用在弹窗上面
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`
